<template>
  <div>
      <van-picker
      :loading="load"
      show-toolbar
      toolbar-position="bottom"
      :title="arr[0].area"
      value-key="label"
      :columns="arr"
      @cancel="onCancel"
      @confirm="onConfirm"
      >
      <template #confirm >
        <div id="sure">确定</div>
      </template>
      <template #cancel >
        <div id="esc">取消</div>
      </template>
    </van-picker>
  </div>
</template>

<script>
import { getHousesApi } from '@/api'
export default {
  props: {
    arr: Array,
    load: Boolean
  },
  data () {
    return {
      area: '',
      subway: '',
      rentType: '',
      price: ''
    }
  },
  methods: {
    async onConfirm (value, index) {
      // console.log(value, index)
      // console.log(this.arr)
      if (value instanceof Array) {
        if (index[0] === 0) {
          this.area = index[2]
            ? this.arr[0].children[index[1]].children[index[2]].value
            : this.arr[0].children[index[1]].value
        } else {
          this.subway = index[2]
            ? this.arr[1].children[index[1]].children[index[2]].value
            : this.arr[1].children[index[1]].value
        }
      }
      if (value instanceof Object && this.arr.length === 3) {
        this.rentType = value.value
      }
      if (value instanceof Object && this.arr.length > 3) {
        this.price = value.value
      }
      console.log(this.more)
      const res = await getHousesApi({
        cityid: localStorage.getItem('cityValue'),
        area: this.area,
        subway: this.subway,
        rentType: this.rentType,
        price: this.price
      })
      console.log(res)
      this.$store.dispatch('syncsetHouseList', res)
      this.$emit('closeFn')
    },
    onCancel () {
      this.$emit('closeFn')
    }
  }
}
</script>

<style lang="less" scoped>
#sure{
  width: 230px;
  height: 50px;
  line-height: 50px;
  background-color: #1cb676;
  font-size: 18px;
  color: #fff;
  text-align: center;;
}
#esc {
  width: 120px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #21b97a;
  text-align: center;;
}
</style>
